<template>
  <div class="sign-in">
    <img src="@/assets/images/logo.png" alt="" />
    <a-form :model="formState" layout="vertical" class="sign-form">
      <h1>欢迎登录CDN业务管理端</h1>
      <a-form-item>
        <a-input
          v-model="formState.account"
          placeholder="请输入账号"
          size="large"></a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-model="formState.password"
          placeholder="请输入密码"
          size="large"></a-input>
      </a-form-item>
      <a-button type="primary" size="large" @click="handleLogin">登录</a-button>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/stores/app'

const router = useRouter()
const appStore = useAppStore()
const formState = ref({
  account: '',
  password: ''
})
const handleLogin = () => {
  appStore.saveToken('your_token_here')
  router.replace('/')
}
</script>
<style lang="less" scoped>
.sign-in {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/login-bg.webp') repeat;
}
.sign-form {
  position: absolute;
  top: 50%;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  padding-left: 3.125rem;
  padding-right: 3.125rem;
  font-size: 0.875rem;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 476px;
  height: 476px;
  right: 15.6%;
  background-color: #fff;
  box-shadow: 0.125rem 0.125rem 3.125rem 0 rgba(58, 58, 58, 0.04);
}
</style>
